<template>
  <div class="detail-right-wrap">
    <div class="detail-right-up bd-wrap">
      <img src="../../assets/images/bd.jpg" alt="">
      <h2>动漫电影蓝光碟BD50名侦探柯南:史上最糟糕的两天</h2>
      <h4>名侦探柯南:江户川柯南失踪事件.史上zui糟糕的两天(中文.台)12.11</h4>
      <div class="selection">
        数量: <v-counter :max="20" :min="1" @on-change="onParamChange('counter', $event)"></v-counter>(剩余: 20)
      </div>
      <div class="selection" >
        选择: <v-section :selections="versionList" @on-change="onParamChange('select', $event)"></v-section>
      </div>
      <div class="selection" >
        套餐: <v-chooser :selections="periodList" @on-change="onParamChange('chooser', $event)"></v-chooser>
      </div>
      <div class="selection" >
        版本: <v-MultChooser :selections="versionList" @on-change="onParamChange('multChooser', $event)"></v-MultChooser>
      </div>
      
    </div>
    <div class="detail-right-down">
        <p>影片简介：</p>
        <p>★为了纪念连载 20周年而制作的特别篇动画! 这是一部前所未闻的超级特别作品， 丧失记忆的柯南即将面临的命运是什么．．．??</p>
        <p>★本特别篇脚本由执导过日本电影「落KEY人生」的导演「内田健二」担当，(本片曾获日本37届报知映画赏佳影片及36届日本电</p>
        <p>★影学院奖佳编剧)实现跨次元合作，精采可期!</p>
        <p>★卖座电影与人气动画跨界携手，共同引发奇迹的化学效应!!</p>
        <p>★延揽更豪华级的声优阵容加入：包括香川照之、广末凉子!!</p>
        <p>★再度延揽剧场版音乐班底：仓木麻衣 献唱主题曲「DYNAMITE」，音乐由大野克夫担纲!</p>

        <p>由于阿笠博士家的浴室在进行整修，柯南于是跟着毛利兰、灰原哀一同来到大众澡堂洗澡，却在澡堂意外滑了一跤而失去意识。这时候，有两名男子自告奋勇开车载柯 南送医急救，其实他们两人包括凶恶杀手近藤，当时正好在澡堂秘密完成了某项任务，却因为对柯南有所顾忌而决定将他带走。只是当柯南恢复意识醒过来时，却因 跌跤时头部所受之重击而丧失了记忆。
  另一方面，一位名为香苗的女访客来到了毛利侦探事务所，目的是委托调查外遇。对美女完全没抵抗力的小五郎，跟随香苗一同前往原本从事便利屋的丈夫的工作地点，小五郎也因此看到了香苗丈夫的照片，照片上的人正是近藤……。</p>
        <p>失去记忆的柯南、爆弹恐怖事件所带来的恐慌，以及乏人问津的贫穷演员樱井又再次被卷入事件中！到后一刻都不能错过的好戏，事件的结果将会如何发展下去！？</p>
      </div>
  </div>
  
</template>

<script>
import VSection from '../../components/selection'
import VChooser from '../../components/chooser'
import VMultChooser from '../../components/multChooser'
import VCounter from '../../components/counter'
export default {
  components:{
      VSection,
      VChooser,
      VMultChooser,
      VCounter
  },
  data () {
    return {
      versionList:[
        {
          label: '日版',
          value: 0 
        },
        {
          label: '国版',
          value: 1 
        },
        {
          label: '美版',
          value: 2 
        }
      ],
      periodList: [
        {
          label: '仅光盘',
          value: 0
        },
        {
          label: '套餐一',
          value: 1
        },
        {
          label: '套餐二',
          value: 2
        }
      ]
    }
  },
  methods:{
    onParamChange (type,val) {
      console.log(type,val)
    }
  }
}
</script>

<style scoped>
.bd-wrap img{
  float: right;
  width: 200px;
  
}

.bd-wrap p{
  padding: 5px;
}

.selection{
  margin-top: 25px;
  margin-left: 20px;
}
</style>

